import { lazy, Suspense } from 'react';
import { Outlet, Navigate, useRoutes } from 'react-router-dom';

import Box from '@mui/material/Box';
import LinearProgress, { linearProgressClasses } from '@mui/material/LinearProgress';

import { varAlpha } from 'src/theme/styles';
import { AuthLayout } from 'src/layouts/auth';
import { DashboardLayout } from 'src/layouts/dashboard';

// ----------------------------------------------------------------------

export const HomePage = lazy(() => import('src/pages/home'));
export const BlogPage = lazy(() => import('src/pages/blog'));
export const UserPage = lazy(() => import('src/pages/user'));
export const SignInPage = lazy(() => import('src/pages/sign-in'));
export const ProductsPage = lazy(() => import('src/pages/products'));
export const Page404 = lazy(() => import('src/pages/page-not-found'));
export const ForgetPasswd = lazy(() => import('src/pages/forget-password'));
export const CashBookPage = lazy(() => import('src/sections/cashBook'));
export const DeviceManagementPage = lazy(() => import('src/pages/device-management'));
export const AutoAccountingPage = lazy(() => import('src/pages/auto-accounting'));
export const AutoAccountingRulesPage = lazy(() => import('src/pages/auto-accounting-rules'));
export const AutoAccountingTemplatesPage = lazy(() => import('src/pages/auto-accounting-templates'));
export const AutoAccountingExecutionLogsPage = lazy(() => import('src/pages/auto-accounting-execution-logs'));
export const DictManagementPage = lazy(() => import('src/pages/dict-management'));
export const DictDataPage = lazy(() => import('src/pages/dict-data'));
export const DictTestPage = lazy(() => import('src/pages/dict-test'));

// ----------------------------------------------------------------------

const renderFallback = (
  <Box display="flex" alignItems="center" justifyContent="center" flex="1 1 auto">
    <LinearProgress
      sx={{
        width: 1,
        maxWidth: 320,
        bgcolor: (theme) => varAlpha(theme.vars.palette.text.primaryChannel, 0.16),
        [`& .${linearProgressClasses.bar}`]: { bgcolor: 'text.primary' },
      }}
    />
  </Box>
);

export function Router() {
  return useRoutes([
    {
      element: (
        <DashboardLayout>
          <Suspense fallback={renderFallback}>
            <Outlet />
          </Suspense>
        </DashboardLayout>
      ),
      // 页面显示在右侧
      children: [
        { element: <HomePage />, index: true },
        { path: 'user', element: <UserPage /> },
        { path: 'products', element: <ProductsPage /> },
        { path: 'blog', element: <BlogPage /> },
        { path: 'cash-book', element: <CashBookPage /> },
        { path: 'device-management', element: <DeviceManagementPage /> },
        { path: 'auto-accounting/templates', element: <AutoAccountingTemplatesPage /> },
        { path: 'auto-accounting', element: <AutoAccountingPage /> },
        { path: 'auto-accounting/rules', element: <AutoAccountingRulesPage /> },
                 { path: 'auto-accounting/execution-logs', element: <AutoAccountingExecutionLogsPage /> },
         { path: 'dict-management', element: <DictManagementPage /> },
         { path: 'dict-data', element: <DictDataPage /> },
         { path: 'dict-test', element: <DictTestPage /> },
      ],
    },
    // 新打开一个页面展示
    {
      path: 'sign-in',
      element: (
        <AuthLayout>
          <SignInPage />
        </AuthLayout>
      ),
    },
    {
      path: '404',
      element: <Page404 />,
    },
    {
      path: 'up-passwd',
      element: <ForgetPasswd />,
    },
    {
      path: '*',
      element: <Navigate to="/404" replace />,
    },
  ]);
}
